<template>
	<EditTableHeaderCell v-if="getIsEdit" :showEditIcon="getShowEditIcon"> {{ getTitle }}</EditTableHeaderCell>
	<span v-else>{{ getTitle }}</span>
	<BasicHelp v-if="getHelpMessage" :text="getHelpMessage" :class="`${prefixCls}__help`" />
</template>
<script lang="ts">
import type { PropType } from 'vue';
import type { BasicColumn } from '../types/table';
import { defineComponent, computed } from 'vue';
import BasicHelp from '../../../Basic/src/BasicHelp.vue';
import EditTableHeaderCell from './EditTableHeaderIcon.vue';
import { useDesign } from '@/hooks/web/useDesign';

export default defineComponent({
	name: 'TableHeaderCell',
	components: {
		EditTableHeaderCell,
		BasicHelp,
	},
	props: {
		column: {
			type: Object as PropType<BasicColumn>,
			default: () => ({}),
		},
	},
	setup(props) {
		const { prefixCls } = useDesign('basic-table-header-cell');

		const getIsEdit = computed(() => !!props.column?.edit);
		const getShowEditIcon = computed(() => !!props.column?.editIcon);
		const getTitle = computed(() => props.column?.customTitle || props.column?.title);
		const getHelpMessage = computed(() => props.column?.helpMessage);

		return { prefixCls, getIsEdit, getTitle, getHelpMessage, getShowEditIcon };
	},
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-basic-table-header-cell';

.@{prefix-cls} {
	&__help {
		margin-left: 8px;
		color: rgb(0 0 0 / 65%) !important;
	}
}
</style>
